<template>
	<view class="content">
		<view class="walletTop">
			<view class="paypassword">
				<view class="paypasscont" @click="setPassword(userInfo.isFirst)">
					<view class="passTip">
						<image class="tiperr" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/err.png" mode=""></image>
						<view class="tiptxt">设置支付密码后方可正常使用钱包</view>
					</view>
					<view class="iconfont iconsty">&#xe601;</view>
				</view>
			</view>
			<view class="walletcont">
				<view class="walletTitle">我的余额</view>
				<view class="walletmoney">
					<view class="sign iconfont">&#xe604;</view>
					<view class="money">{{userInfo.nowMoney}}</view>
				</view>
				<view class="wallbot">
					<view class="wallbot_fl">已提现：<text class="iconfont">&#xe604;</text> {{userInfo.yxUserinfo.withdrawnMoney}}</view>
					<view class="wallrule" @click="getRules">
						<view>余额规则</view>
						<image class="rulrs" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/rule.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 提现 -->
			<image class="withdraw" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/withdraw.png" mode="" @click="getWithdraw"></image>

		</view>

		<view class="topup">
			<view class="topup_line">
				<view class="up_name">选择充值金额</view>
				<view class="select" @click="getRecharge">自定义金额</view>
			</view>
			<view class="amount">
				<view class="recharge" v-for="(item,index) in rechargeList" :key="index" @click="toRecharge(item)">{{item.value.price}}</view>
			</view>
		</view>
		<view class="detailgroup">
			<view class="detail_title">余额明细</view>
			<view class="detail_fixed">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
				 height="550">
					<view class="detail_list" v-for="(item,index) in list" :key="index">
						<view class="detail_fl">
							<view :class="[{detail_dsc:item.pm == 1},{expend:item.pm == 0}]">{{item.title}}</view>
							<view class="detail_date">{{item.createTime}}</view>
						</view>
						<view class="detail_fr"> {{item.pm == 0 ? '-' : '+'}}<text class="iconfont sign">&#xe604;</text> {{item.number}}</view>
					</view>
				</mescroll-body>
			</view>

		</view>


	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				rechargeList: [],
				downOption: {
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 空空如也 ~', // 提示
						btnText: '刷新',
						// 列表第一页无任何数据时,显示的空布局
						// use : 是否启用
						// icon : 空布局的图标路径 (支持网络路径)
						// tip : 提示文本
						// btnText : 按钮文本
						// fixed : 是否使用定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,所以最终还是会降级为absolute)
						// top : fixed定位的top值 (完整的单位值,如"100rpx", "10%";)
						// zIndex : fixed定位z-index值
					},
					textNoMore: "--我也是有底线的--" //没有更多数据的提示文本
				},
				userInfo: {},
				list: []
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync(this.constant.StorageName.APP_USER_INFO));
			this.userInfo = userInfo
			console.log(userInfo)
			let that = this;
			uni.$on(that.constant.EventKey.UPDATE_USER_INFO, function(data) {
				let userInfo = JSON.parse(uni.getStorageSync(this.constant.StorageName.APP_USER_INFO));
				that.userInfo = userInfo;
			})

			uni.$on('update', function(data) {
				that.mescroll.resetUpScroll(); //调用加载
			})
			that.getRechargeInfo();

		},
		onUnload() {
			let that = this;
			uni.$off('update');
			uni.$off(that.constant.EventKey.UPDATE_USER_INFO)
		},
		methods: {
			// 设置支付密码
			setPassword: function(isFirst) {
				if (isFirst == 0) {
					uni.navigateTo({
						url: '../paymentSetting/setPayPassword/setPayPassword',
					});
				} else if (isFirst == 1) {
					uni.navigateTo({
						url: '../paymentSetting/bindPassword/bindPassword',
					});
				}

			},
			// 提现规则  (弹窗)
			getRules: function() {
				uni.navigateTo({
					url: '../../login/potocol/potocol?type=4',
				});
			},
			downCallback() {
				this.mescroll.resetUpScroll(); //调用加载
			},
			upCallback(page) {
				console.log(page)
				let that = this;
				that.api.userExpenseDetail({
					page: page.num,
					limit: page.size
				}).then(res => {
					console.log(res)
					let curPageData = res.data.records;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = res.data.pages;
					//设置列表数据
					setTimeout(() => { // 模拟效果
						if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
						this.list = this.list.concat(curPageData); //追加新数据
						console.log(this.list, "-----");
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
					}, 500)

				})

			},
			// 提现
			getWithdraw: function() {
				uni.navigateTo({
					url: '../rechargePayment/userWithdraw/userWithdraw?depositType=1',
				});
			},
			// 充值
			getRecharge: function() {
				uni.navigateTo({
					url: '../rechargePayment/rechargePayment?type=2',
				});
			},
			// 充值额度
			getRechargeInfo: function() {
				this.api.getRechargeCard().then(res => {
					console.log(res)
					this.rechargeList = res.data.recharge_price_ways;
				})
			},
			// 根据选择金额进行充值
			toRecharge: function(item) {
				uni.navigateTo({
					url: '../rechargePayment/rechargePayment?money=' + item.value.price + '&type=1'
				});
			},

			// 获取提现规则


		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-family: 'PingFang SC';
		background: #FFFFFF;
		padding: 20rpx 40rpx;
		font-size: 30rpx;
		color: #140005;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.walletTop {
		width: 100%;
		box-sizing: border-box;
		height: 310rpx;
		// #ifdef APP-PLUS
		background: url(https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/userSign.png) no-repeat;
		background-size: 100%;
		// #endif
		// #ifdef H5 || MP-WEIXIN
		background: #E42221;
		// #endif
		border-radius: 16rpx;
		position: relative;
		padding: 60rpx 40rpx 20rpx 40rpx;

		.paypassword {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.64);
			color: #FFFFFF;
			padding: 15rpx 40rpx;
			border-radius: 16rpx 16rpx 0 0;

			.paypasscont {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				line-height: 33rpx;

				.iconsty {
					width: 20rpx;
					font-size: 24rpx;
				}

				.passTip {
					width: calc(100% - 20rpx);
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tiperr {
						width: 24rpx;
						height: 24rpx;
					}

					.tiptxt {
						padding-left: 10rpx;
					}
				}
			}

		}

		.walletcont {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			.walletTitle {
				width: 100%;
				box-sizing: border-box;
				line-height: 44rpx;
				color: #FFFFFF;
			}

			.walletmoney {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 80rpx;
				color: #FFFFFF;

				.sign {
					font-size: 40rpx;
					color: #FFDA71;
					padding-top: 20rpx;
				}
			}

			.wallbot {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #FFFFFF;

				.wallrule {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.rulrs {
						width: 24rpx;
						height: 24rpx;
						margin-left: 5rpx;
					}
				}

			}
		}

		.withdraw {
			width: 140rpx;
			height: 79rpx;
			position: absolute;
			top: 0;
			right: -10rpx;
			bottom: 0;
			margin: auto;
			z-index: 30;
		}

	}

	.topup {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 0;

		.topup_line {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.select {
				font-size: 28rpx;
			}
		}

		.amount {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;

			.recharge {
				width: 200rpx;
				line-height: 120rpx;
				text-align: center;
				box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
			}

			&::after {
				content: "";
				width: 200rpx;
				height: 120rpx;
				border: 1rpx solid transparent;
			}
		}

	}

	.detailgroup {
		width: 100%;
		box-sizing: border-box;

		.detail_title {
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 15rpx;
		}

		.detail_fixed {
			width: 100%;
			box-sizing: border-box;
			max-height: 600rpx;
			overflow-y: auto;

			.detail_list {
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.detail_dsc {
					color: #C7973B;
					line-height: 44rpx;
				}

				.expend {
					color: #E42221;
					line-height: 44rpx;
				}

				.detail_date {
					font-size: 22rpx;
					color: #999999;
				}

				.sign {
					color: #FFDA71;
					font-size: 36rpx;
				}
			}

		}

	}

	.customer {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 1.2;
		color: #333333;
	}
</style>
